import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('todo')
@observer
class TodoExtra extends Component {
    render() {
        const { unfinishedTodoCount, changeFilter, filter } = this.props.todo

        return <footer className="footer">
            <span className="todo-count"><strong>{unfinishedTodoCount}</strong> item left</span>
            <ul className="filters">
                <li>
                    <button className={filter === 'All' ? 'selected' : '' } onClick={() => changeFilter('All')}>All</button>
                </li>
                <li>
                    <button className={filter === 'Active' ? 'selected' : ''} onClick={() => changeFilter('Active')}>Active</button>
                </li>
                <li>
                    <button className={filter === 'Completed' ? 'selected' : ''} onClick={() => changeFilter('Completed')}>Completed</button>
                </li>
            </ul>

            <button className="clear-completed">Clear completed</button>
        </footer>
    }
}

export default TodoExtra